<!-- 添加机械 -->
<template>
  <div class="AddMechanicsPage">
    <NavBarHeader class="navBarHeader"></NavBarHeader>
    <div class="container">
      <img
        src="./../../../../public/img/personal/titleImg.png"
        class="titleImg"
      />
      <div class="contentInput">
        <div class="inputName"><span class="styleTips">*</span>机械信息：</div>
        <div class="inputBox">
          <el-input
            v-model="mechanicsName"
            placeholder="机械名称"
            class="mechanicsName"
          ></el-input>
          <el-cascader
            v-model="mechanicsType"
            :options="aarNew"
            @change="handleChange"
            class="mechanicsType"
            ref="tree"
            filterable
            placeholder="机械类型"
          ></el-cascader>
          <div class="mechanicsTypeBox">
            <div class="leftBrandBox">
              <el-select
                v-model="leftBrand"
                @change="handleChange1"
                placeholder="请选择机械品牌（若无选项可手动输入）"
                class="LeftModel"
                v-if="brandsList.length > 1"
              >
                <el-option
                  v-for="(leftBrand, i) in aarNew1"
                  :key="i"
                  :value="leftBrand.label"
                >
                </el-option>
              </el-select>
              <el-input
                class="LeftModel"
                v-model="leftBrand"
                v-if="brandsList.length == 0"
                placeholder="请选择机械品牌（若无选项可手动输入）"
              ></el-input>
            </div>
            <div class="RightModel">
              <el-select
                v-model="rightModel"
                placeholder="请选择机械型号（若无选项可手动输入）"
                class="RightModel"
                v-if="brandsList.length > 1"
              >
                <el-option
                  v-for="(items, i) in listData"
                  :key="i"
                  :value="items.label"
                >
                </el-option>
              </el-select>
              <el-input
                class="LeftModel"
                v-model="rightModel"
                v-if="brandsList.length == 0"
                placeholder="请选择机械品牌（若无选项可手动输入）"
              ></el-input>
            </div>
          </div>
          <div class="mechanicsTypeBox">
            <div>
              <el-date-picker
                v-model="timeData"
                :picker-options="pickerOptions"
                type="date"
                placeholder="车辆出厂日期"
                value-format="yyyy-MM-dd"
                class="leftBrand1"
              >
              </el-date-picker>
            </div>
            <div>
              <el-input
                v-model="inputCard"
                placeholder="车辆识别代码"
                class="RightModel1"
              ></el-input>
            </div>
          </div>
          <div class="addressBox">
            <el-input
              v-model="mechanicsAddress"
              placeholder="机械位置"
              class="mechanicsName"
              id="pickerinput2"
              @focus="onAddress"
              @change="onChangeAddress"
            >
            </el-input>
            <el-amap
              v-show="isAddress"
              ref="map"
              vid="amapDemo"
              :amap-manager="amapManager"
              :center="center"
              :zoom="zoom"
              :plugin="plugin"
              :events="events"
              class="amap-demo"
            >
              <el-amap-marker vid="amapDemo" :position="center">
              </el-amap-marker>
            </el-amap>
          </div>
          <!-- <el-input
            v-model="mechanicsNum"
            placeholder="机械规格"
            class="mechanicsName"
          >
          </el-input> -->
        </div>
      </div>
      <div class="upImgBox">
        <div class="inputNameImgBox">
          <div class="inputNameImg">
            <span class="styleTips">*</span>机械图片：
          </div>
          <div class="inputNameImgInfo">(最少上传一张)</div>
        </div>
        <div class="upBox">
          <!-- 整机图片 -->
          <div class="upImgList1">
            <el-upload
              :class="{ hide: imgUrl.length == 4 }"
              ref="node"
              action
              :auto-upload="false"
              :file-list="fileList"
              list-type="picture-card"
              accept="image/*"
              :on-change="fileChange"
              :before-upload="beforeAvatarUpload"
              :http-request="upDataImg"
              :limit="4"
            >
              <img
                src="./../../../../public/img/rent/upLoadImg.png"
                class="upLoadImg1"
              />
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreviewOne(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabledOne"
                    class="el-upload-list__item-delete"
                    @click="handleRemoveOne(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisibleOne">
              <img width="100%" :src="dialogImageUrlOne" alt="" />
            </el-dialog>
            <div class="upNameOne">整机图片(1-4张)</div>
          </div>
          <!-- 局部照片 -->
          <div class="upImgList1">
            <el-upload
              :class="{ hide: imgUrl1.length == 4 }"
              action
              ref="node1"
              :file-list="fileList1"
              list-type="picture-card"
              :auto-upload="false"
              accept="image/*"
              :on-change="fileChange1"
              :before-upload="beforeAvatarUpload"
              :http-request="upDataImg"
              :limit="4"
            >
              <img
                src="./../../../../public/img/rent/upLoadImg.png"
                class="upLoadImg1"
              />
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
            <div class="upNameOne">局部图片(1-4张)</div>
          </div>
          <!-- 机械名牌 -->
          <div class="upBox1">
            <div class="upImgList1">
              <el-upload
                action
                ref="node2"
                :file-list="fileList2"
                list-type="picture-card"
                :auto-upload="false"
                accept="image/*"
                :limit="limitCount"
                :on-change="fileChange2"
                :before-upload="beforeAvatarUpload"
                :http-request="upDataImg"
                :class="{ hide: hideUpload }"
              >
                <img
                  src="./../../../../public/img/rent/upLoadImg.png"
                  class="upLoadImg1"
                />
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreviewTwo(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemoveTwo(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisibleTwo">
                <img width="100%" :src="dialogImageUrlTwo" alt="" />
              </el-dialog>
              <div class="upNameOne">机械铭牌/合格证</div>
            </div>
            <!-- 机械视频 -->
            <div class="upImgList">
              <img
                src="./../../../../public/img/rent/upLoadImg.png"
                class="upLoadImg"
                @click="upImgdata"
                v-if="!VideoUrl"
              />
              <video
                autoplay
                @click="upImgdata"
                :src="VideoUrl"
                class="upLoadImg"
                v-if="VideoUrl"
              ></video>
              <div class="upName1">机械视频</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 工程报价 -->
      <div class="formCon3">
        <label class="headTitle">
          <span style="color: #ff0000">*</span>
          报价:
        </label>
        <div class="formContent">
          <div class="inputStyleBox">
            <input
              type="text"
              placeholder="请输入"
              class="inputStyle"
              v-model="offer1"
            />
            <span class="spanstyle">元/台班</span>
          </div>
          <div class="inputStyleBox">
            <input
              type="text"
              placeholder="请输入"
              class="inputStyle"
              v-model="offer2"
            />
            <span class="spanstyle">元/月</span>
          </div>
        </div>
      </div>
      <!-- 影响报价因素 -->
      <div class="formCon4">
        <label class="headTitle">影响报价因素:</label>
        <div class="formCon">
          <el-checkbox-group
            v-model="checkboxGroup1"
            fill="#FF7D59"
            text-color="#FFFFFF"
            class="formCon4List"
          >
            <el-checkbox-button
              v-for="factor in influeFactors"
              :label="factor"
              :key="factor"
            >
              {{ factor }}
            </el-checkbox-button>
          </el-checkbox-group>
        </div>
      </div>
      <!-- 其他 -->
      <div class="formCon4">
        <label class="headTitle">其他:</label>
        <div class="formCon">
          <el-checkbox-group
            v-model="checkboxGroup2"
            fill="#FF7D59"
            text-color="#FFFFFF"
            class="formCon4List"
          >
            <el-checkbox-button
              v-for="Factor in otherFactors"
              :label="Factor"
              :key="Factor"
            >
              {{ Factor }}
            </el-checkbox-button>
          </el-checkbox-group>
        </div>
      </div>
      <!-- 其他说明 -->
      <!-- <div class="formCon4">
        <label class="headTitle">其他说明:</label>
        <el-input
          v-model="other"
          placeholder="输入其他说明"
          class="mechanicsName1"
        ></el-input>
      </div> -->
      <div class="sunMitBtn" @click="setSavebase">
        <span>提交</span>
        <img
          src="./../../../../public/img/success/rightIcon.png"
          class="rightIcon"
        />
      </div>
    </div>
  </div>
</template>

<script >
import NavBarHeader from "../../../components/NavBarHeader";
import {
  typemenuthirds,
  getModelmenu,
  upDataImg,
  setSavebase,
  editInfo,
} from "./../../../apis/api.js";
import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();
let inputElement = null;
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { NavBarHeader },
  data() {
    let self = this;
    return {
      hideUpload: false,
      limitCount: 1, //只能上传一张
      isAddress: false, //地址
      VideoUrl: "", //机械视频
      imgUrl: [], //整机图片
      fileList: [], //回显的整机图片
      fileList1: [],
      fileList2: [],
      imgUrl1: [], //局部图片
      imgUrl2: "", //铭牌图片
      fileLists: "", //上传的dom
      checkboxGroup1: [], //报价因素
      checkboxGroup2: [], //其他
      influeFactors: ["司机", "机油", "场地条件", "物流运输"], //报价因素数组
      otherFactors: ["物流因素", "履约服务", "智能监管"], //其他
      other: "", //其他说明
      aarNew: [], //机械类型
      aarNew1: [], //品牌型号
      listData: [], //机械型号
      brandsList: [],
      mechanicsAddress: "", //机械位置
      mechanicsName: "", //机械名称
      mechanicsType: "", //机械类型
      leftBrand: "", // 品牌
      rightModel: "", //型号
      timeData: "", //日期
      inputCard: "", //车辆识别代码
      // mechanicsNum: "", //机械规格
      offer1: "", //台班报价
      offer2: "", //月报价
      dialogImageUrl: "",
      dialogImageUrlOne: "",
      dialogImageUrlTwo: "",
      sizeId: "",
      dialogVisibleOne: false,
      dialogVisibleTwo: false,
      dialogVisible: false,
      disabled: false,
      disabledOne: false,
      disabledTwo: false,
      pickerOptions: {
        disabledDate(v) {
          return v.getTime() >new Date().getTime();
        },
      },
      amapManager,
      zoom: 12,
      center: [116.491173, 39.914523],
      events: {
        init: (o) => {
          self.latitude = 39.914523;
          self.longitude = 116.491173;
          self.mechanicsAddress = "";
          o.getCity((result) => {
            console.log(result);
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          self.isAddress = false;
          console.log(e);
          self.center = [e.lnglat.lng, e.lnglat.lat]; //点击选择新地址为中心点
          self.longitude = e.lnglat.lng;
          self.latitude = e.lnglat.lat;
          self.longitude = e.lnglat.lng;
          self.latitude = e.lnglat.lat;
          let lonAndlat = self.longitude + "," + self.latitude;
          console.log(self.longitude + "," + self.latitude);
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
          });
          geocoder.getAddress(lonAndlat, function (status, result) {
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                self.mechanicsAddress = result.regeocode.formattedAddress;
                self.address = result.regeocode.formattedAddress;
                self.$nextTick();
              } else {
                self.mechanicsAddress = "";
                self.address = "";
              }
            } else {
              self.mechanicsAddress = "";
              self.address = "";
            }
          });
        },
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            },
          },
        },
      ],
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //机械类型
    handleChange(index) {
      console.log(this.$refs["tree"].getCheckedNodes());
      let obj = this.$refs["tree"].getCheckedNodes();
      let objData = obj[0].data.value;
      this.getModelmenu(objData);
      this.leftBrand = "";
      this.rightModel = "";
    },
    // 品牌
    handleChange1(brand) {
      this.aarNew1.forEach((item) => {
        if (brand == item.label) {
          this.listData = [];
          item.models.forEach((items) => {
            this.listData.push(items);
          });
        }
      });
      this.rightModel = "";
    },
    // 点击input弹出地图
    onAddress() {
      this.isAddress = true;
    },
    onChangeAddress() {
      this.isAddress = false;
    },
    // 删除整机械图片
    handleRemoveOne(file) {
      console.log(file);
      // 实现缩略图模板时删除文件
      let fileList = this.$refs.node.uploadFiles;
      let index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid;
      });
      fileList.splice(index, 1);
      this.imgUrl.splice(index, 1);
      this.fileList = fileList;
      this.imgUrl = this.imgUrl;
    },
    // 放大机械图片
    handlePictureCardPreviewOne(file) {
      this.dialogImageUrlOne = file.url;
      this.dialogVisibleOne = true;
    },
    // 删除局部机械图片
    handleRemove(file) {
      // 实现缩略图模板时删除文件
      let fileList = this.$refs.node1.uploadFiles;
      let index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid;
      });
      fileList.splice(index, 1);
      this.imgUrl1.splice(index, 1);
      this.fileList1 = fileList;
      this.imgUrl1 = this.imgUrl1;
    },
    // 删除铭牌机械图片
    handleRemoveTwo(file) {
      // 实现缩略图模板时删除文件
      let fileList = this.$refs.node2.uploadFiles;
      let index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid;
      });
      fileList.splice(index, 1);
      this.fileList2 = fileList;
      this.imgUrl2 = "";
      //删除后恢复上传的图片
      this.hideUpload = false;
    },
    // 放大局部机械图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 放大局部机械图片
    handlePictureCardPreviewTwo(file) {
      this.dialogImageUrlTwo = file.url;
      this.dialogVisibleTwo = true;
    },
    // 点击上传整机图片
    fileChange(file) {
      this.fileLists = this.$refs.node.uploadFiles;
      this.upDataImg(file);
    },
    // 点击上传局部
    fileChange1(file) {
      this.fileLists = this.$refs.node1.uploadFiles;
      this.upDataImg1(file);
    },
    // 点击上传铭牌
    fileChange2(file) {
      this.fileLists = this.$refs.node2.uploadFiles;
      // 上传一张后隐藏上传图片
      this.hideUpload = this.fileLists.length >= this.limitCount;
      this.upDataImg2(file);
    },
    // 上传图片接口
    async upDataImg(file) {
      console.log(file);
      let formData = new FormData();
      formData.append("file", file.raw);
      let res = await upDataImg(formData);
      if (res.data.result == "1") {
        this.imgUrl.push(res.data.body.url);
      }
    },
    async upDataImg1(file) {
      let formData = new FormData();
      formData.append("file", file.raw);
      let res = await upDataImg(formData);
      if (res.data.result == "1") {
        this.imgUrl1.push(res.data.body.url);
      }
    },
    async upDataImg2(file) {
      let formData = new FormData();
      formData.append("file", file.raw);
      let res = await upDataImg(formData);
      if (res.data.result == "1") {
        this.imgUrl2 = res.data.body.url;
      }
    },
    // 控制上传图片格式101010
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      const isLt20M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片的格式只能是 JPG或PNG 格式!");
      }

      if (!isPNG) {
        this.$message.error("上传图片的格式只能是 JPG或PNG 格式!");
      }

      if (!isLt20M) {
        this.$message.error("上传图片的大小不能超过 2M!");
      }
    },
    //上传图片
    upImgdata() {
      if (inputElement === null) {
        // 生成文件上传的控件
        inputElement = document.createElement("input");
        inputElement.setAttribute("type", "file");
        inputElement.style.display = "none";

        if (window.addEventListener) {
          inputElement.addEventListener("change", this.uploadFile1, false);
        } else {
          inputElement.attachEvent("onchange", this.uploadFile1);
        }
        document.body.appendChild(inputElement);
      }
      inputElement.click();
    },
    uploadFile1(el) {
      if (el && el.target && el.target.files && el.target.files.length > 0) {
        console.log(el);
        const files = el.target.files[0];
        const isLt10M = files.size / 1024 / 1024 < 10;
        const size = files.size / 1024 / 1024;
        console.log(size);
        // 判断上传文件的大小
        console.log(files.type);
        if (!isLt10M) {
          this.$message.error("上传视频大小不能超过 10MB!");
        } else if (files.type.indexOf("video") === -1) {
          //     [
          //   "video/mp4",
          //   "video/ogg",
          //   "video/flv",
          //   "video/avi",
          //   "video/wmv",
          //   "video/rmvb",
          //   "video/mov"
          // ]
          // this.$dialog.toast({ mes: '请选择图片文件' });
          this.videoShow = true;
          this.$message.error("请选择视频格式文件");
        } else {
          const that = this;
          const reader = new FileReader(); // 创建读取文件对象
          reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
          reader.onload = function () {
            // 文件读取完成后
            // 读取完成后，将结果赋值给img的src
            // 数据传到后台
            const formData = new FormData();
            formData.append("file", files); // 可以传到后台的数据
            that.upDataImg3(formData, 0);
          };
        }
      }
    },
    // 上传机械视频接口
    async upDataImg3(file) {
      try {
        let res = await upDataImg(file);
        if (res.data.result == "1") {
          this.VideoUrl = res.data.body.url;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取机械品牌
    async getModelmenu(size, leftBrand) {
      let data = {
        size: size,
      };
      let res = await getModelmenu(data);
      if (res.data.result == "1") {
        this.brandsList = res.data.body.brands;
        this.changeName1(this.brandsList);
        this.handleChange1(leftBrand);
      }
    },
    // 获取机械类型内容
    async typemenuthirds() {
      let data = {
        num: "1",
      };
      try {
        let res = await typemenuthirds(data);
        if (res.data.result == "1") {
          this.typeList = res.data.body.first;
          this.changeName(this.typeList);
        }
      } catch (e) {
        console.log(e);
      }
    },
    //机械类型中转换属性名
    changeName(data) {
      this.aarNew = data.map((arrlist) => {
        return {
          children: arrlist.types,
          value: arrlist.size_id,
          label: arrlist.name,
        };
      });
      this.aarNew.forEach((value, index) => {
        value.children = value.children.map((arrlist) => {
          return {
            children: arrlist.size,
            value: arrlist.size_id,
            label: arrlist.name,
          };
        });
      });
      this.aarNew.forEach((value, index) => {
        value.children.forEach((value, index) => {
          value.children = value.children.map((arrlist) => {
            return {
              value: arrlist.size_id,
              label: arrlist.name,
            };
          });
        });
      });
    },
    changeName1(data) {
      this.aarNew1 = data.map((arrlist) => {
        return {
          models: arrlist.models,
          value: arrlist.brand_name,
          label: arrlist.brand_name,
        };
      });
      this.aarNew1.forEach((value, index) => {
        value.models = value.models.map((arrlist) => {
          return {
            label: arrlist.name,
          };
        });
      });
    },
    // 保存机械信息
    async setSavebase() {
      console.log(this.VideoUrl);
      if (this.mechanicsName == "") {
        this.$message.error("请填写机械名称！");
        return;
      }
      if (this.mechanicsType == "") {
        this.$message.error("请选择机械类型！");
        return;
      }
      if (this.leftBrand == "") {
        this.$message.error("请选择机械品牌！");
        return;
      }
      if (this.rightModel == "") {
        this.$message.error("请选择机械型号");
        return;
      }
      if (this.timeData == "") {
        this.$message.error("请选择车辆出厂日期！");
        return;
      }
      if (this.inputCard == "") {
        this.$message.error("请输入车辆识别代号");
        return;
      }
      if (this.mechanicsAddress == "") {
        this.$message.error("请输入机械位置！");
        return;
      }
      if (this.offer1 == "" || this.offer2 == "") {
        this.$message.error("请输入报价单位！");
        return;
      }
      // if(this.mechanicsNum == ''){
      //   Message.error('请输入机械规格！')
      //   return
      // }
      if (this.imgUrl == "" && this.fileList == "") {
        this.$message.error("请上传机械整机图片！");
        return;
      }
      console.log(this.VideoUrl);
      let data = {
        name: this.mechanicsName, //机械名称
        brand: this.leftBrand.toString(), //品牌中文
        model: this.rightModel, //型号中文
        lat: this.latitude,
        lon: this.longitude,
        type: this.mechanicsType.splice(0, 1).toString(), //机械类型
        size: this.mechanicsType.splice(-1).toString(), //机械子类型
        address: this.mechanicsAddress,
        jxzj: this.imgUrl.join(","), //机械整机照片,可以上传4个,逗号拼接
        jxjb: this.imgUrl1.join(","), //机械局部照片
        cpmp: this.imgUrl2, //机械铭牌
        jxhgz: this.imgUrl2, //机械合格证
        affect_quotation: this.checkboxGroup1.toString(), //影响报价因素
        other_support: this.checkboxGroup2.toString(), //其他支持
        machine_id: this.$route.query.machineId, //机械id修改的时候使用
        punche_price: this.offer1,
        month_price: this.offer2,
        machine_code: this.inputCard, //车辆识别代号
        purchase_time: this.timeData, //车辆购买日期
        machine_video: this.VideoUrl, //机械视频
        info: this.other, // 其他说明
      };
      let res = await setSavebase(data);
      if (res.data.result == "1") {
        this.$message.success("提交成功！");
        setTimeout(() => {
          this.$router.push({ path: "/personal", query: { navBarIndex: 1 } });
        }, 1500);
      }
      if (
        res.data.result == 106 ||
        res.data.result == 107 ||
        res.data.result == 108 ||
        res.data.result == 109
      ) {
        this.$message.warning(res.data.message);
      }
    },
    // 编辑机械回显
    async editInfo() {
      let data = {
        machine_id: this.$route.query.machineId,
      };
      try {
        let res = await editInfo(data);
        if (res.data.result == "1") {
          let typeBox = [];
          typeBox.push(res.data.body.type, null, res.data.body.size);
          this.mechanicsType = typeBox;
          this.mechanicsName = res.data.body.machine_name;
          this.leftBrand = res.data.body.machine_brand;
          this.rightModel = res.data.body.machine_model;
          this.timeData = res.data.body.purchase_time;
          this.inputCard = res.data.body.machine_code;
          this.mechanicsAddress = res.data.body.machine_address;
          res.data.body.jxzp_list.forEach((item) => {
            let obj = new Object();
            obj.url = item;
            if (obj.url) {
              this.fileList.push(obj);
            }
          });
          this.imgUrl = res.data.body.jxzp_list;
          res.data.body.jxjb.forEach((item) => {
            let obj = new Object();
            obj.url = item;
            if (obj.url) {
              this.fileList1.push(obj);
            }
          });
          this.imgUrl1 = res.data.body.jxjb;
          let urlImg = res.data.body.cpmp.split(",");
          urlImg.forEach((item) => {
            let obj = new Object();
            obj.url = item;
            if (obj.url) {
              this.fileList2.push(obj);
              this.hideUpload = true;
            }
          });
          this.imgUrl2 = res.data.body.cpmp;
          this.offer1 = res.data.body.punche_price;
          this.offer2 = res.data.body.month_price;
          this.checkboxGroup1 = res.data.body.affect_quotation.split(",");
          this.checkboxGroup2 = res.data.body.other_support.split(",");
          this.other = res.data.body.machine_info;
          this.VideoUrl = res.data.body.machine_video;
          this.sizeId = res.data.body.size;
          this.getModelmenu(this.sizeId, this.leftBrand);
        }
      } catch (e) {}
    },
    // 高德地图
    install() {
      let that = this;
      AMapUI.loadUI(["misc/PoiPicker"], function (PoiPicker) {
        var poiPicker = new PoiPicker({
          //city:'北京',
          input: "pickerinput2",
        });
        //初始化poiPicker
        that.poiPickerReady(poiPicker);
      });
    },
    poiPickerReady(poiPicker) {
      var that = this;
      window.poiPicker = poiPicker;
      var marker = new AMap.Marker();
      var infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -20),
      });
      //选取了某个POI
      poiPicker.on("poiPicked", function (poiResult) {
        var source = poiResult.source,
          poi = poiResult.item,
          info = {
            source: source,
            id: poi.id,
            name: poi.name,
            location: poi.location.toString(),
            address: poi.address,
          };

        marker.setMap(that.map);
        infoWindow.setMap(that.map);
        marker.setPosition(poi.location);
        infoWindow.setPosition(poi.location);
        infoWindow.open(that.map, marker.getPosition());
        console.log(marker.getPosition());
        that.center = [marker.getPosition().lng, marker.getPosition().lat];
        that.longitude = marker.getPosition().lng;
        that.latitude = marker.getPosition().lat;
        let lonAndlat = that.longitude + "," + that.latitude;
        var geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all",
        });
        geocoder.getAddress(lonAndlat, function (status, result) {
          if (status === "complete" && result.info === "OK") {
            if (result && result.regeocode) {
              that.mechanicsAddress = result.regeocode.formattedAddress;
              that.address = result.regeocode.formattedAddress;
              that.$nextTick();
            }
          }
        });
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.install();
    this.typemenuthirds();
    if (this.$route.query.machineId) {
      this.editInfo();
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.navBarHeader {
  background: #1c1e2b;
  z-index: 1000;
}
.container {
  padding-top: 104px;
  box-sizing: border-box;
  margin: 0 auto;
  width: 1180px;
  padding-bottom: 100px;
}
.contentInput {
  display: flex;
  margin-top: 24px;
  margin-left: 20px;
}
.titleImg {
  width: 325px;
  height: 68px;
}
.inputBox {
  width: 684px;
  height: 330px;
  background: #f6f7fb;
  border-radius: 4px;
  margin-left: 31px;
}
.inputName {
  font-size: 14px;
  color: #999;
  margin-top: 20px;
}
.inputNameImgBox {
}
.inputNameImg {
  font-size: 14px;
  color: #999;
}
.styleTips {
  color: red;
  font-size: 14px;
}
.mechanicsName {
  width: 645px;
  height: 40px;
  margin-top: 20px;
  margin-left: 20px;
}
.mechanicsName1 {
  width: 684px;
  height: 40px;
  margin-left: 16px;
}
.mechanicsType {
  width: 644px;
  height: 40px;
  margin-top: 20px;
  margin-left: 20px;
}
.mechanicsTypeBox {
  margin-top: 20px;
  margin-left: 20px;
  display: flex;
  align-items: center;
}
.leftBrand {
  width: 312px;
  height: 40px;
}
.leftBrand1 {
  width: 310px;
  height: 40px;
}
.RightModel {
  width: 312px;
  height: 40px;
  margin-left: 10px;
}
.RightModel1 {
  width: 312px;
  height: 40px;
  margin-left: 20px;
}
.LeftModel {
  width: 312px;
  height: 40px;
}
.addressBox {
  position: relative;
}
.amap-demo {
  width: 800px;
  height: 400px;
  position: absolute;
  top: 60px;
  left: 0;
  z-index: 100;
}
.upImgBox {
  display: flex;
  margin-top: 20px;
  margin-left: 20px;
}
.inputNameImgInfo {
  font-size: 12px;
  color: #999;
}
.upImgList1 {
  margin-left: 30px;
  margin-bottom: 20px;
}
.upImgList {
  margin-bottom: 20px;
}
.upLoadImg1 {
  width: 100px;
  height: 100px;
  cursor: pointer;
}
.upLoadImg {
  width: 100px;
  height: 100px;
  margin-left: 10px;
  cursor: pointer;
}
.upNameOne {
  font-size: 12px;
  color: #606266;
  margin-top: 10px;
  margin-left: 5px;
}
.upName1 {
  font-size: 12px;
  color: #606266;
  margin-top: 10px;
  margin-left: 33px;
}
.upName2 {
  font-size: 12px;
  color: #606266;
  margin-top: 10px;
  margin-left: 10px;
}
.upName {
  font-size: 12px;
  color: #606266;
  margin-top: 10px;
  margin-left: 13px;
}
.upBox {
  display: flex;
  flex-direction: column;
}
.upBox1 {
  display: flex;
  align-items: center;
}
.formCon3 {
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 30px;
  display: flex;

  .headTitle {
    font-size: 14px;
    color: #909399;
    width: 86px;
    height: 20px;
    margin-top: 14px;
    margin-right: 2px;
  }
}
.formCon4 {
  display: flex;
  margin-top: 20px;
  margin-left: 20px;
  .headTitle {
    font-size: 14px;
    color: #909399;
    width: 93px;
    height: 40px;
    line-height: 40px;
  }
  .formCon4List {
    margin-left: 15px;
  }
  .formCon {
    width: 684px;
    color: #333;
  }
}
.sunMitBtn {
  margin-top: 31px;
  margin-left: 130px;
  width: 149px;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
}
.rightIcon {
  width: 27px;
  height: 11px;
  margin-left: 10px;
}
.inputStyle {
  padding-left: 5px;
  font-size: 12px;
  height: 40px;
  width: 80px;
  background: none;
  text-align: center;
}
.spanstyle {
  margin-left: 5px;
  font-size: 12px;
  color: #333;
}
.formContent {
  margin-left: 20px;
  width: 300px;
  background: #ffe9d7;
  border-radius: 4px;
  display: flex;
}
.inputStyleBox {
  margin-left: 10px;
}
</style>